<template>

    <div class="second_block" v-if="visible" :style="amazonCommetSize">
      <div :style="progressGiftDiv">
        <img :src="progressGiftSrc" :style="progressGiftSize">
      </div>
      <div style="font-size: 17px;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">{{script_1}}</div>
      <br>
      <div :style="rateInfoSize">
        <div style="font-size: 12pt;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">
          Your Comment
        </div>
        <el-rate
          v-model="form.rate"
          disabled
          style="font-size: 20px;text-align: center;color: white;">
        </el-rate>
      </div>
      <br/>
      <br/>
      <div style="text-align: center">
        <el-input
          :style="textareaSize"
          type="textarea"
          :placeholder="char"
          maxlength="1000"
          @focus="buttonColor($event)"
          size="8"
          rows="4"
          v-model="form.comment"
          show-word-limit
        >
        </el-input>
      </div>
      <br>
      <div style="text-align: center">
<!--        <el-button type="warning" @click="doConfirmGiftPage" round>Copy to share in Amazon</el-button>-->
        <el-button  style="background-color: #536cec" @click="doConfirmGiftPage" ><span style="color:white">Copy to share in Amazon</span></el-button>
      </div>
<!--      <br>-->
<!--      <div style="font-size: 11pt;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">{{script_2}}</div>-->
    </div>
</template>

<script>

export default {
  name: "amazon-comment",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      char:'',
      char_length:0,
      textareaSize:'',
      progressGiftDiv: '',
      progressGiftSize: '',
      progressGiftSrc: '',
      rateInfoSize:'',
      script_1:'',
      script_2:'',
      script_3:'',
      comment_sensitive_word:[],
      sensitive_word_no:0,
      amazonCommetSize:'',
    };
  },
  mounted() {
    // 根据不同路由跳转不同页面
    if (this._isMobile()) {
      this.progressGiftSrc = '/static/gift_logo_blue_move.png';
      this.progressGiftSize = 'width: 99%';
      this.textareaSize='width:95%';
      this.productPageSize = 'height: calc(100vw - 1px);width:calc(100vw - 30px)';
      this.rateInfoSize = 'border: 1px solid #DCDFE6;text-align: center;height: 65px;width: 94%;margin: auto';
    } else {
      this.progressGiftSrc = '/static/gift_logo_blue_web.png';
      this.progressGiftDiv = 'margin-left: 17%;';
      this.progressGiftSize = 'width: 80%;height: 55px';
      this.productPageSize = 'height: calc(100vw - 990px)';
      this.rateInfoSize = 'border: 1px solid #DCDFE6;text-align: center;height: 65px;width: 68%;margin: auto';
      this.textareaSize='width:68%';
    }
  },
  methods : {
    // 判断是否是手机端，如果是，返回true
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    },
    //关闭页面
    handleClose(done) {
      done();
      this.$emit('handleClose');
    },
    buttonColor(event)
    {
      let input = event.currentTarget
      input.style.border = "1px solid #536cec"
    },
    setBuyerConfig(data){
      this.script_1 = data.amazon_comment_page_script.script_1;
      this.script_2 = data.amazon_comment_page_script.script_2;
      this.script_3 = data.amazon_comment_page_script.script_3;
      this.char_length = data.comment_mini_char;
      this.comment_sensitive_word = data.comment_sensitive_word;
      this.sensitive_word_no = data.sensitive_word_no;
      this.char = 'Please enter at least '+data.comment_mini_char+' characters';
    },
    setCommentConfig(data)
    {
      this.script_1 = data.amazon_comment_page_script.script_1;
      // this.script_2 = data.amazon_comment_page_script.script_2;
    },
    setForm(form)
    {
      this.form = form;
    },
    //跳转确认礼品页面
    doConfirmGiftPage()
    {

      //判断是否有填写评价
      if (!this.form.comment){
        this.$message({type:'warning',message:'Please fill in the evaluation',offset:160});
      }else if (this.form.comment.length < this.char_length){
        this.$message({type:'warning',message:'The evaluation is less than the minimum length of '+this.char_length+' characters',offset:160});
      }else{
        //留评敏感词过滤
        var info=this.form.comment.split(' ');
        var comment_new = [];
        var sensitive_word = [];//评论中是否有敏感词
        info.forEach(item => {
          if (this.comment_sensitive_word.indexOf(item) === -1) comment_new.push(item);
          if (this.comment_sensitive_word.indexOf(item) !== -1) sensitive_word.push(item);
        })
        this.form.comment = comment_new.join(' ')
        this.$copyText(this.form.comment).then(function (e) {
          console.log(e)
        }, function (e) {
          console.log(e)
        });
        if (sensitive_word.length>0 && this.sensitive_word_no==1){
          this.$message({type:'warning',message:'Sensitive word '+ sensitive_word.join(' ; ') + ' in the comment does not guide Amazon to leave a comment' ,offset:160,duration:4000});
          this.form.sensitive_user = 1;
          setTimeout(() => {
            this.$emit('getConfirmGiftPage2',this.form)
          }, 5000);
        }else {
          // window.open('https://www.amazon.com/product-reviews/'+this.form.asin, '_blank');
          window.open('https://www.amazon.com/review/review-your-purchases', '_blank');
          this.$emit('getConfirmGiftPage2',this.form);
        }

      }

    }
  }
}
</script>

<style scoped>

::v-deep .el-rate__icon{
  font-size: 30px;
}

</style>
